<template name="QcMenu">
    <view>
        <view class="nav_bar" style="background-color:white">
            <view v-for="(menu, index) in menu_list" :key="index" class="nav_bar_item" :style="{color: menu['name_en']===activeMenu ? theme['color'] : '#929292'}" @click='navMenu(index)'>
                <view>
                    <i class="iconfont" :class="'icon-'+menu['icon_name']"></i>
                </view>
                <view style="font-size: 14px;padding-top: 2px">{{menu['name']}}</view>
            </view>
        </view>
    </view>
</template>

<script>

export default {
    name: 'QcMenu',
    props: ['activeMenu'],
    data() {
        return {
            theme: {
                color: '#F27931'
            },
            menu_list: [
                {
                    name: '首页',
                    icon_name: 'shouye',
                    name_en: 'index',
                    path: '/pages/index/index'
                },
                {
                    name: '用户中心',
                    icon_name: 'yonghu',
                    name_en: 'person',
                    path: '/ucenter/pages/person/index'
                }
            ]
        }
    },
    created() {
    },
    methods: {
        navMenu(index) {
            if (this.menu_list[index].url !== null && this.menu_list[index].url !== '' && this.menu_list[index].url !== undefined) {
                window.location.href = this.menu_list[index].url
            } else {
                uni.redirectTo({
                    url: this.menu_list[index].path
                })
            }
        }
    }
}
</script>

<style>
@import url("~@/common/static/iconfont/iconfont.css");

.nav_bar {
    display: table;
    bottom: 0;
    width: 100%;
    height: 50px;
    padding: 0;
    table-layout: fixed;
    border-top: 0;
    border-bottom: 0;
    position: fixed;
    right: 0;
    left: 0;
    z-index: 10;
}
.nav_bar_item {
    display: table-cell;
    width: 1%;
    height: 50px;
    color: #929292;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>